* {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cube {
	width: 200px;
	height: 200px;
	margin-top: 60px;
	/* position: absolute; */
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transform-style: preserve-3d;
	/*定义该元素下的所有子元素，同属于一个三维空间里*/
}

.side {
	position: absolute;
	width: 100%;
	height: 100%;
	line-height: 200px;
	font-size: 100px;
	text-align: center;
	opacity: .7;
}

.front {
	transform: translateZ(100px);
	background: skyblue;
}

.back {
	transform: rotateY(180deg) translateZ(100px);
	background: red;
}

.top {
	transform: rotateX(90deg) translateZ(100px);
	background: yellow;
}

.bottom {
	transform: rotateX(-90deg) translateZ(100px);
	background: green;
}

.left {
	transform: rotateY(-90deg) translateZ(100px);
	background: salmon;
}

.right {
	transform: rotateY(90deg) translateZ(100px);
	background: lavender;
}

.cube {
	animation: rotateCube 5s linear infinite;
}

@keyframes rotateCube {
	0% {
		transform: rotateX(0deg) rotateY(0) rotateZ(0);
	}

	100% {
		transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}
